<template>
    <div class="container">
        <div class="top">
            <img src="../assets/img/20190430100319.png" />
        </div>
        <div class="chong18">
            <a :href="productUrl(7)">
                <img src="../assets/img/15564395391474.png" />
            </a>
        </div>
        <div class="chong51">
            <a :href="productUrl(8)">
                <img src="../assets/img/15564395562853.png" />
            </a>
        </div>
        <div class="tishi">
            <div>1.此充值为书币充值；</div>
            <div>2.书币为虚拟物品，不支持退货；</div>
            <div>3.本次充值活动每人仅限参加3次。</div>
        </div>
        <div class="bottom">
            <img src="../assets/img/15564371992335.png" />
        </div>
    </div>
</template>

<script>
    export default {
        name: "hd51",
        data(){
            return{
                successUrl:encodeURIComponent( 'http://'+document.domain+'/index'),
            }
        },
        created:function () {
            this.set()
        },
        methods:{
            set:function(){
                this.$emit('set','hide')
            },
            productUrl(id) {
                let url = `/buy?ProductID=`+id+
                    `&SuccessRedirect=`+this.successUrl+
                    `&FailedRedirect=`+this.successUrl;
                return this.$axios.defaults.linkUrl(url);
            }
        }
    }
</script>

<style scoped>
    .container{
        width: 100%;
        /*height: 100vh;*/
        background: url(../assets/img/1556438157507.jpg) no-repeat;
        background-size: cover;
        position: relative;
        padding-bottom: 150px;
        margin-bottom: 0px;
    }
    .bottom{
        position: absolute;
        bottom: 0px;
        width: 100%;
    }
    img{
        width: 100%;
    }
    .top{
        /*margin: 10px 0px;*/
    }
    .chong18{
        margin-bottom: 30px;
    }
    .tishi{
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
    }
    .tishi div{
        margin-top: 5px;
    }
</style>